<template>
  <div id='HeadCard'  class='HeadCard'>
      <el-card shadow="always" :body-style="{ padding: '10px' }">
             <div slot="header">
                 <span>{{title}}</span><span class="el-icon-s-data"></span>
             </div>
             <!-- 数字内容 -->
             <div class="card-count">{{count}}</div>
             <!-- 图表 -->
             <div class="card-charts">
                 <slot name="charts"></slot>
             </div>
             <!-- 底部数据 -->
             <div class="card-footer">
                <slot  name="footer"> </slot>
             </div>
             
         </el-card>
        
  </div>
</template>

<script>
export default {
  name: 'HeadCard',
  props: ['title','count'],
  data () {
    return {

    }
  },
  created () { // 实例被创建钩子

    },
  computed: { // 计算属性

    },
  components: { // 组件引用

    },
  methods: { // 方法

    },
  mounted () { // Dom挂载钩子

    },
  watch: { // 监测变化

    }
}
</script>
<style scoped lang='scss'>
 .HeadCard{
     .el-icon-s-data{
         color:#ccc;
         font-size:20px;
         float: right;
         cursor: pointer;

     }
     .card-count{
         font-size: 28px;
         color:#2f3542;
     }
    .el-card ::v-deep .el-card__header,
    .el-card ::v-deep .el-card__body{
        padding-bottom:15px !important;
    }
    .card-footer{
        margin-top:12px;
        color:#70a1ff;
        text-align: center;
    }
   
 }
</style>